Week 5 — CSS Effects

Enrique Gonzalez

Required items: #2 background image, #9 opacity, #12 image map. Plus 5 extras: #1, #3, #4, #7, #8.

#1 Figure box

Reno Sign
Figure with caption using <figure> / <figcaption>.

#2 Background image (required)

This section uses background-image with background-size: cover.

#3 Border

This card shows a 3px solid border.

#4 Rounded borders & #7 Box shadow

All cards use border-radius and a soft box-shadow.

#8 Linear & radial gradients

Linear gradient
Radial gradient

#9 Opacity (required)

Lake Tahoe Shore
Hover: image fades to 50% opacity

#12 Image map (required)

Click the regions. Image is 800×400 so coords are accurate.

Image map demo Left → Neocities Middle → MDN map Right → Reference

Left rectangle → Neocities, middle circle → MDN, right rectangle → reference.